import { messages } from "share/common";
import React, { Component } from "react";
import { Modal } from "antd";
import { openModal, removeContainer } from "components/method/openModal";
import "styles/components/UI/loading.scss";

class loading extends Component {
  render() {
    const { visible, afterClose, content, title, description } = this.props;
    return (
      <Modal
        title={null}
        closable={false}
        footer={null}
        visible={visible}
        width={360}
        className={"loading-modal"}
        afterClose={afterClose}
      >
        <div className={"loading-modal-content"}>
          <div className={"loading-modal-content-box"}>
            <div className="box">
              <div className="circle" />
              <div className="box1" />
              <div className="box2" />
              <div className="box3" />
            </div>
            <div className="content">{content}</div>
          </div>
          <div className={"loading-modal-content-font"}>
            <div className={"title"}>{title}</div>
            <div>{description}</div>
          </div>
        </div>
      </Modal>
    );
  }
}

loading.open = function (env, { content, title, description = messages("common.waiting") /*请稍等...*/ }) {
  let container;
  const targetProps = {
    visible: true,
    description,
    title,
    content,
    afterClose: () => {
      removeContainer(container);
      container = null;
    },
  };
  function close() {
    openModal(
      loading,
      {
        ...targetProps,
        visible: false,
      },
      env,
      container
    );
  }
  container = openModal(loading, targetProps, env);
  return close;
};

export default loading;
